<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .serach{
        position: relative;
        width: 250px;
        height: 46px;
        border:1px solid #333;
        border-radius: 15px;
        overflow: hidden;
    }
    button{
      background: url("images/搜索.png") no-repeat;
      background-size: 20px;
      background-position-y: center;
      width: 70px;
      height: 46px;
      position: absolute;
      right: 0;
      top: 0;
      border:none;
      outline:none;
      
    }
    input{
      position: absolute;
      padding: 0;
      height: 46px;
      border:none;
      outline:none;
      text-decoration-line: none;
    }
    .input{
        padding-left: 20px;
    }
    </style>
</head>
<body>
    <div class="serach">
     <input class="input" placeholder="搜索" type="text">
     <button>搜索</button>
    </div>
</body>
</html>